<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="common.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>书籍管理</title>
    <style>
        /* 隐藏滚动条但可以滚动 */
        body {
            overflow: hidden;
        }
        .container-fluid {
            overflow-y: scroll;
            height: 100vh; /* 高度设置为全屏 */
        }
    </style>
    <script>
        $(document).ready(function() {
            loadBooks(); // 页面加载时加载所有图书
        });

        function loadBooks() {
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/books',
                data: { operation: 'findAll' },
                dataType: 'json',
                success: function(response) {
                    $('#bookTableBody').empty();
                    $.each(response.data, function(index, book) {
                        $('#bookTableBody').append(
                            '<tr>' +
                            '<td>' + book.bookId + '</td>' +
                            '<td>' + book.title + '</td>' +
                            '<td>' + book.author + '</td>' +
                            '<td><img src="' + book.coverImageUrl + '" alt="封面" class="img-thumbnail" width="50" height="50"></td>' +
                            '<td>' + book.isbn + '</td>' +
                            '<td>' + book.price + '</td>' +
                            '<td>' +
                            '<button onclick="editBook(this)" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editBookModal">编辑</button> ' +
                            '<button onclick="deleteBook(' + book.bookId + ')" class="btn btn-danger btn-sm">删除</button>' +
                            '</td>' +
                            '</tr>'
                        );
                    });
                },
                error: function(xhr, status, error) {
                    console.error('加载书籍数据出错:', error);
                }
            });
        }

        function editBook(row) {
            var $row = $(row).closest('tr'); // 获取当前行
            var bookId = $row.find('td:eq(0)').text();
            var title = $row.find('td:eq(1)').text();
            var author = $row.find('td:eq(2)').text();
            var coverImageUrl = $row.find('td:eq(3) img').attr('src');
            var isbn = $row.find('td:eq(4)').text();
            var price = $row.find('td:eq(5)').text();

            $('#editBookId').val(bookId);
            $('#editTitle').val(title);
            $('#editAuthor').val(author);
            $('#editCoverImage').attr('src', coverImageUrl);
            $('#editIsbn').val(isbn);
            $('#editPrice').val(price);

            $('#editBookModal').modal('show'); // 显示模态框
        }

        function deleteBook(bookId) {
            if (confirm('确定要删除该图书吗？')) {
                $.ajax({
                    type: 'POST',
                    url: '${pageContext.request.contextPath}/books',
                    data: {
                        operation: 'deleteBook',
                        bookId: bookId
                    },
                    dataType: 'json',
                    success: function(response) {
                        loadBooks(); // 刷新图书列表
                    },
                    error: function(xhr, status, error) {
                        console.error('删除图书出错:', error);
                    }
                });
            }
        }

        function saveBook() {
            var bookId = $('#editBookId').val();
            var title = $('#editTitle').val();
            var author = $('#editAuthor').val();
            var coverImageUrl = $('#editCoverImageInput').val();
            var isbn = $('#editIsbn').val();
            var price = $('#editPrice').val();

            var operation = bookId ? 'updateBook' : 'addBook';

            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/books',
                data: {
                    operation: operation,
                    bookId: bookId,
                    title: title,
                    author: author,
                    coverImageUrl: coverImageUrl,
                    isbn: isbn,
                    price: price
                },
                dataType: 'json',
                success: function(response) {
                    $('#editBookModal').modal('hide');
                    loadBooks(); // 刷新图书列表
                },
                error: function(xhr, status, error) {
                    console.error('保存图书信息出错:', error);
                }
            });
        }


        function uploadCoverImage(fileInput) {
            var formData = new FormData();
            formData.append('file', fileInput.files[0]);

            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/file/upload',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    $('#editCoverImage').attr('src', response); // 更新封面预览
                    $('#editCoverImageInput').val(response); // 更新隐藏的封面 URL 输入框
                },
                error: function(xhr, status, error) {
                    console.error('上传封面图片出错:', error);
                }
            });
        }

        function addBook() {
            $('#editBookId').val('');
            $('#editTitle').val('');
            $('#editAuthor').val('');
            $('#editCoverImage').attr('src', '#');
            $('#editIsbn').val('');
            $('#editPrice').val('');
            $('#editBookModal').modal('show'); // 显示模态框
        }
    </script>
</head>
<body>
<div class="container-fluid mt-4">

    <!-- 图书表格 -->
    <table id="bookTable" class="table table-bordered table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>书名</th>
            <th>作者</th>
            <th>封面</th>
            <th>ISBN</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="bookTableBody">
        <!-- 图书数据将会动态填充在这里 -->
        </tbody>
    </table>

    <!-- 新增图书按钮 -->
    <button class="btn btn-success" onclick="addBook()">新增图书</button>
</div>

<!-- 编辑图书的模态框 -->
<div class="modal fade" id="editBookModal" tabindex="-1" role="dialog" aria-labelledby="editBookModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editBookModalLabel">编辑图书</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="editBookForm">
                    <input type="hidden" id="editBookId" name="bookId">
                    <div class="form-group">
                        <label for="editTitle">书名</label>
                        <input type="text" class="form-control" id="editTitle" name="title">
                    </div>
                    <div class="form-group">
                        <label for="editAuthor">作者</label>
                        <input type="text" class="form-control" id="editAuthor" name="author">
                    </div>
                    <div class="form-group">
                        <label for="editCoverImageFile">封面</label>
                        <input type="file" class="form-control-file" id="editCoverImageFile" name="coverImageUrl" onchange="uploadCoverImage(this)">
                        <img id="editCoverImage" class="img-thumbnail mt-2" width="100" height="100" src="#" alt="封面预览">
                        <input type="hidden" id="editCoverImageInput" name="coverImageUrl">
                    </div>
                    <div class="form-group">
                        <label for="editIsbn">ISBN</label>
                        <input type="text" class="form-control" id="editIsbn" name="isbn">
                    </div>
                    <div class="form-group">
                        <label for="editPrice">价格</label>
                        <input type="text" class="form-control" id="editPrice" name="price">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveBook()">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
